@extends('admin.layout')

@section('title', '评论列表')

@section('body')
    <div class="layui-fluid comment-manage">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header search-header">
                        <form class="layui-form" lay-filter="myform">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">文章ID</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="article_id" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">作者名字</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="name" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">是否已回复</label>
                                    <div class="layui-input-inline">
                                        <select name="is_reply">
                                            <option value="">全部</option>
                                            <option value="0">未回复</option>
                                            <option value="1">已回复</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">时间范围</label>
                                    <div class="layui-input-inline" style="width: 120px;">
                                        <input type="text" name="start_time" id="start_time" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid">-</div>
                                    <div class="layui-input-inline" style="width: 120px;">
                                        <input type="text" name="end_time" id="end_time" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn" lay-submit="" lay-filter="listbox-search" type="submit">搜索</button>
                                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-body">
                        <table id="listbox"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @verbatim
        <script type="text/html" id="toolbar">
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batch-del"><i class="layui-icon layui-icon-delete"></i>批量删除
            </button>
        </script>
        <script type="text/html" id="authorTpl">
            <div class="author-info">
                <img src="/static/img/avatar{{ d.avatar }}.jpg" class="author-avatar"/>
                <p class="author-name">{{= d.name }}</p>
                {{# if(d.url){ }}
                <p class="author-url"><a href="{{= d.url }}" target="_blank">{{= d.url }}</a></p>
                {{# } }}
                <p class="author-email"><a href="mailto:{{= d.email }}">{{= d.email }}</a></p>
            </div>
        </script>
        <script type="text/html" id="contentTpl">
            <p>{{ d.content }}</p>
            {{# if(d.reply_content){ }}
            <div class="master-reply">
                <p class="master-meta">博主回复：</p>
                {{ d.reply_content }}
            </div>
            {{# } }}
        </script>
        <script type="text/html" id="linkTpl">
            <a href="{{ d.article.url }}" class="article-link" target="_blank">{{= d.article.title }}</a>
        </script>
        <script type="text/html" id="actionBar">
            <p class="action-btn">
                <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="reply"><i class="layui-icon layui-icon-reply-fill"></i>回复
                </button>
            </p>
            <p class="action-btn">
                <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除
                </button>
            </p>
        </script>
    @endverbatim
    <script>
        layui.use(['form', 'layer', 'table', 'laydate'], function () {
            var $ = layui.$;
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;
            var laydate = layui.laydate;

            var tableIns = table.render({
                elem: '#listbox', //指定原始表格元素选择器（推荐id选择器）
                toolbar: '#toolbar',
                url: '/admin/comment/list',
                where: form.val('myform'),
                page: {
                    curr: 1
                },
                limit: 10,
                cols: [[
                    {type: 'checkbox', width: '4%'},
                    {field: 'name', width: '16%', templet: '#authorTpl', title: '作者信息'},
                    {field: 'content', width: '42%', templet: '#contentTpl', title: '评论内容'},
                    {field: 'article_title', width: '18%', templet: '#linkTpl', title: '评论文章'},
                    {field: 'created_at', align: 'center', width: '10%', title: '提交时间'},
                    {align: 'center', width: '10%', toolbar: '#actionBar', title: '操作'}
                ]],
                done: function (res, curr) {
                    if (curr > 1 && res.data.length === 0) {
                        tableIns.reload({
                            page: {
                                curr: curr - 1
                            }
                        });
                    }
                },
                parseData: function (res) {
                    return {
                        code: res.code,
                        msg: res.msg,
                        count: res.data.total,
                        data: res.data.items,
                        limit: res.data.limit
                    };
                }
            });

            form.on('submit(listbox-search)', function (data) {
                tableIns.reload({
                    where: data.field,
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            laydate.render({
                elem: '#start_time'
            });

            laydate.render({
                elem: '#end_time'
            });

            //监听头部工具栏事件
            table.on('toolbar', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                if (obj.event === 'batch-del') {
                    var data = checkStatus.data;
                    var ids = '';
                    for (var i in data) {
                        ids += ids ? ',' : '';
                        ids += data[i].id;
                    }
                    if (ids === '') {
                        layer.alert('请先勾选要删除的评论');
                        return;
                    }
                    layer.confirm('确定批量删除这些评论吗？', {
                        icon: 3
                    }, function () {
                        deleteComment(ids);
                    });
                }
            });

            //监听工具事件
            table.on('tool', function (obj) {
                if (obj.event === 'reply') {
                    var url = '/admin/comment/reply?id=' + obj.data.id;
                    layer.open({
                        type: 2,
                        title: '回复评论',
                        shade: 0.8,
                        area: ['840px', '600px'],
                        content: url,
                        maxmin: true,
                        cancel: function () {
                            tableIns.reload('listbox');
                        }
                    });
                }
                if (obj.event === 'del') {
                    layer.confirm('确定删除此评论吗？', {
                        icon: 3
                    }, function () {
                        deleteComment(obj.data.id);
                    });
                }
            });

            function deleteComment(ids) {
                $.post('/admin/comment/del', {ids: ids}, function (res) {
                    if (res.code === 0) {
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 1000
                        }, function () {
                            tableIns.reload();
                        });
                    } else {
                        layer.msg(res.msg, {icon: 5});
                    }
                }, 'json');
            }
        });
    </script>
@endsection
